<template>
<!--collect_list.wxml-->
<view class="container">
    <view class="collect-ul">
        <view v-for="(item, index) in collects" :key="index" class="collect-li">
            <navigator class="img-href" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
                <image class="collect-img" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=400&height=400'"></image>
            </navigator>
            <view class="collect-name ellipsis-2">{{item.goods_name}}</view>
            <view class="collect-footer">
                <view class="collect-price">￥{{item.shop_price}}</view>
                <view class="little-btn-2" @tap="cancelCollect" :data-id="item.goods_id">删除</view>
                <navigator class="little-btn-1" :url="'/pages/goods/goodsList/goodsList?cat_id=' + item.cat_id">看相似</navigator>
            </view>
        </view>
    </view>
    <view class="no-data" v-if="!collects || collects.length == 0">
        <image src="/static/images/cart-null.png" class="cart-image"></image>
        <view class="no-data-title">没有相关的数据</view>
        <navigator url="/pages/index/index/index" class="lookat"> 去逛逛 </navigator>
    </view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      collects: null,
      //请求的数据
      currentPage: 1
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    load.init(this, '', 'collects');
    this.requestCollectList();
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestCollectList();
    }
  },
  methods: {
    requestCollectList: function () {
      var that = this;
      var requestUrl = '/api/user/getGoodsCollect/' + '?p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
      });
    },

    /** 取消收藏 */
    cancelCollect: function (e) {
      var goodsId = e.currentTarget.dataset.id;
      var that = this;
      request.post('/api/goods/collectGoodsOrNo', {
        data: {
          goods_id: goodsId
        },
        success: function (res) {
          app.globalData.showSuccess(res.data.msg);
          that.deleteItemData(goodsId);
        }
      });
    },

    /** 删除单项数据 */
    deleteItemData: function (goodsId) {
      for (var i = 0; i < this.collects.length; i++) {
        if (this.collects[i].goods_id == goodsId) {
          this.collects.splice(i, 1);
          this.setData({
            collects: this.collects
          });
          break;
        }
      }
    }
  }
};
</script>
<style>
/* collect_list.wxss */
.collect-ul{
    width: 100%;
    background-color: #f5f5f5;
}
.collect-li{
    width: 710rpx;
    background-color: white;
    box-sizing: border-box;
    display: block;
    margin: 0rpx auto;
    margin-top: 20rpx;
    margin-bottom: 0;
    border-radius: 10rpx;
    overflow: hidden;
}
.img-href{
  width: 180rpx;
  height: 180rpx;
  float: left;
}
.collect-img{
    width: 180rpx;
    height: 180rpx;
}
.collect-name{
    font-size: 26rpx;
    height: 92rpx;
    width: 516rpx;
    float:right;
    padding: 20rpx 25rpx 0 25rpx;
    box-sizing: border-box;
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;   
    overflow: hidden;
    text-overflow:ellipsis;
}
.collect-footer{
    font-size: 28rpx;
    padding: 10rpx 20rpx;
    overflow: hidden;
    padding-top: 26rpx;

}
.collect-price{
    color: #ff6a00;
    display: inline-block;
    font-size: 30rpx;
    font-weight: bold;
}
.collect-btn{
	border-radius: 20rpx;
	border: solid 1rpx #f3f3f3;
  font-size: 22rpx;
  color: #1c1c1c;
  padding: 5rpx 15rpx;
  display: inline-block;
  margin-left:10rpx;
}
.little-btn-1{
  width: 120rpx;
  float: right;
}
.little-btn-2{
  width: 120rpx;
  float: right;
}
</style>